<template>
    <Form ref="formEl" :model="formData" label-position="top">
        <draggable v-model="dynamicForm.formList" :animation="200" class="dynamic_form">
            <template #item="{ element, index }">
                <FormItem :prop="element.key" class="dynamic_form_item"
                    :class="dynamicForm.currentIndex == index ? 'isActive' : ''"
                    @click="dynamicForm.changeCurrentIndex(index)">
                    <template #label>
                        <div class="form_label">
                            <span v-if="element.required" class="required_point">*</span>
                            <Input v-model="element.label" />
                        </div>
                        <div>
                            <Checkbox v-model="element.required">必填</Checkbox>
                            <Icon type="ios-trash-outline" size="18" color="#ed4014" class="del_icon"
                                @click.stop="dynamicForm.delComponent(index)" />
                        </div>
                    </template>

                    <myInput v-if="element.type == 'input'" :set-config="element.config" />
                    <myTextarea v-if="element.type == 'textarea'" :set-config="element.config" />
                    <mySelect v-if="element.type == 'select'" :set-config="element.config" />
                    <myNumber v-if="element.type == 'number'" :set-config="element.config" />
                    <myRadio v-if="element.type == 'radio'" :set-config="element.config" />
                    <myCheckbox v-if="element.type == 'checkbox'" :set-config="element.config" />
                    <myTime v-if="element.type == 'time'" :set-config="element.config" />
                    <myTimerange v-if="element.type == 'timerange'" :set-config="element.config" />
                    <myDaterange v-if="element.type == 'daterange'" :set-config="element.config" />
                    <myDate v-if="element.type == 'date'" :set-config="element.config" />
                    <myUpload v-if="element.type == 'upload'" :set-config="element.config" />
                    <editor v-if="element.type == 'editor'" :set-config="element.config" />
                    <mySwitch v-if="element.type == 'switch'" :set-config="element.config" />
                </FormItem>
            </template>
        </draggable>
    </Form>
    
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { dynamicFormStore } from '@/store/dynamicForm';
import draggable from 'vuedraggable';
import myInput from './componentsItem/myInput.vue';
import myTextarea from './componentsItem/myTextarea.vue';
import mySelect from './componentsItem/mySelect.vue';
import myNumber from './componentsItem/myNumber.vue';
import myRadio from './componentsItem/myRadio.vue';
import myCheckbox from './componentsItem/myCheckbox.vue';
import myTime from './componentsItem/myTime.vue';
import myTimerange from './componentsItem/myTimerange.vue';
import myDaterange from './componentsItem/myDaterange.vue';
import myDate from './componentsItem/myDate.vue';
import myUpload from './componentsItem/myUpload.vue';
import editor from '../../components/editor.vue';
import mySwitch from './componentsItem/mySwitch.vue';

const { proxy } = getCurrentInstance();

const dynamicForm = dynamicFormStore();

onMounted(() => {

})
</script>

<style scoped lang="scss">
.dynamic_form {
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .isActive {
        background-color: #f1f1f1;
        box-shadow: 0px 0px 0px 10px #f1f1f1;
    }

    .dynamic_form_item {
        width: 48%;
        cursor: pointer;

        :deep(.ivu-form-item-label) {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &::before {
                display: none;
            }
        }

        .form_label {
            display: flex;
            position: relative;

            .required_point {
                position: absolute;
                top: 0;
                left: -10px;
            }
        }

        .required_point {
            color: #ed4014;
        }

        .del_icon {
            cursor: pointer;
        }
    }

    .dynamic_form_item_width {
        width: 100%;
    }
}
</style>